<template>
    <Row>
        <Col span="22" offset="1">
            <Form ref="Partment" :model="Partment" :rules="ruleValidate" :label-width="120" :style="{marginTop: '30px'}">
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="部门编码">
                            <Input v-model.trim="Partment.NumCode" readonly placeholder="部门编码由系统自动生成" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                
                <Divider orientation="left">部门基本信息</Divider>
                <Row>
                    <Col span="20" offset="2">
                        <FormItem label="部门名称" prop="Name">
                            <Input  v-model.trim="Partment.Name" placeholder="例如：运营管理中心" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="部门简称">
                            <Input v-model.trim="Partment.NickName" placeholder="例如：运营" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="10">
                        <FormItem label="英文名称" prop="EnglishName">
                            <Input v-model.trim="Partment.EnglishName" placeholder="例如：运营管理中心"></Input>
                        </FormItem>
                    </Col>
                    <Col span="10" offset="2">
                        <FormItem label="部门负责人" prop="EnglishName">
                            <Input v-model.trim="Partment.EnglishName" placeholder="例如：李XX"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="上级部门"  prop="ParentId">
                            <!-- <Input v-model.trim="Partment.AccountType" placeholder="例如：直营账户、一般账户" ></Input> -->
                            <Select v-model.trim="Partment.ParentId" filterable allow-create @on-create="handleCreateAccountType" >
                                <Option v-for="item in Parents" :value=item.value :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">企业微信</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="企业微信Id">
                            <Input v-model.trim="Partment.WXId" disabled placeholder="企业微信Id" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="10">
                        <FormItem label="企业微信名称" prop="WXName">
                            <Input v-model.trim="Partment.WXName" placeholder="云湖悦"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">其他信息</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="启用标记">
                            <Select v-model="Partment.IsUsed" >
                                <Option v-for="item in IsUsed" :value=item.value :key="item.label">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="创建时间">
                            <DatePicker v-model="Partment.CreateTime" type="date" placeholder="请选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" readonly style="width:100%"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="20" offset="2" style="text-align:center;margin-top:58px">
                        <Button type="primary" @click="Submit('Partment')">提交</Button>
                        <Button @click="Reset('Partment')" style="margin-left: 108px">重置</Button>
                    </Col>
                </Row>
            </Form>
        </Col>
    </Row>
</template>
<script>
import { mapState } from "vuex";
import { CreateCode,GetOne,Create,Update } from '@/axios/api/PartmentAPI'

export default {
    computed:{
        ...mapState('partment',[
            'currentPartmentID',
            'pageIndex',
            'pageSize',
        ])
    },
    components: {
        
    },
    mounted: function(){
        //console.log(this.currentPartmentID)
        if(this.currentPartmentID != ''){
            this.$Spin.show();
        }
        setTimeout(() => {
            this.$Spin.hide();
        }, 1000);

        if(this.currentPartmentID != ''){
            GetOne(this.currentPartmentID).then(res => {
                this.Partment.Id = res.Id;
                this.Partment.Num = res.Num;
                this.Partment.NumCode = res.NumCode;
                this.Partment.Name = res.Name;
                this.Partment.NickName = res.NickName;
                this.Partment.EnglishName = res.EnglishName;
                this.Partment.WXId = res.WXId;
                this.Partment.WXName =  res.WXName;
                this.Partment.IsUsed = res.IsUsed;
                this.Partment.CreateTime = res.CreateTime;
            });
        }
        else{
            CreateCode().then(res => {
                this.Partment.NumCode = res.toString();
            })
        }
    },
    data () {
        return {
            Partment: {
                Id: '00000000-0000-0000-0000-000000000000',
                Num: 1,
                NumCode: '',
                Name: '',
                NickName: '',
                EnglishName: '',
                WXId: '',
                WXName: '',
                IsUsed: 1 ,
                CreateTime: new Date()
            },
            ruleValidate: {
                Name: [{ required: true, message: '部门名称为必填项！', trigger: 'blur'  }],
            },
            IsUsed:[
                {
                    value: 1,
                    label: "启用"
                },
                {
                    value: 0,
                    label: "禁用"
                }
            ],
            Parents: [{
                value: '00000000-0000-0000-0000-000000000000',
                label: '根部门'
            }],
            callmodal: "partment-sheet",
        }
    },
    watch: {
        /* 'Partment.Name'(value){
            if(value != '' && value != null){
                this.AccountTail = value.substr(value.length-4,4);
            }
        } */
    },
    methods: {
        Submit (name){
            //this.$Message.success('按了OK键');
             this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.Partment.Id == '00000000-0000-0000-0000-000000000000'){
                        this.$Message.success('校验通过!');
                        Create(this.Partment).then(res => {
                            if(res > 0){

                                setTimeout(() => {
                                    this.$store.dispatch('partment/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                    this.$Notice.success({
                                        title: '操作提示',
                                        desc: '保存成功！ '
                                    });
                                }, 1000)
                               
                            }
                            else{
                                this.$Notice.error({
                                    title: '操作提示',
                                    desc: '保存失败！ '
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '保存失败：' + err + '!'
                            });
                        })
                        
                    }
                    else{
                        this.$Message.success('校验通过!');
                        
                        Update(this.Partment).then(res => {
                            if(res > 0){
                                setTimeout(() => {
                                    this.$store.dispatch('partment/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                     this.$Notice.success({
                                        title: '操作提示',
                                        desc: '更新成功！'
                                    });
                                }, 1000)
                            }
                            else{
                                this.$Notice.success({
                                    title: '操作提示',
                                    desc: '更新失败！'
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '更新失败：' + err.data + '!'
                            });
                        })
                    }
                    this.ChangeModal();
                } else {
                    this.$Message.error('校验失败!');
                    //this.ChangeModal('Partment');
                }
            })
            
        },
        Reset (name){
            this.$refs[name].resetFields();
        },
        ChangeModal (){
            //this.$refs[name].resetFields();
            this.$store.commit('partment/CHANGE_MODAL');
            this.$router.push('/hr/Partment')
        }
    }
}
</script>
